게시: 2024년 11월 13일, 최종 업데이트: 2025년 5월 20일
| 설명 동영상 | 웹 | 확장 프로그램 | Chrome 상태 | 인텐트 |
|---|---|---|---|---|
| MDN |  Chrome 138 베타 |
Chrome 138 베타 |
View | 실험 의도 |
Chrome에서 Translator API를 사용하여 브라우저에 제공된 AI 모델로 텍스트를 번역합니다.
전 세계 사용자가 웹사이트 콘텐츠에 액세스할 수 있도록 웹사이트에서 이미 여러 언어로 콘텐츠를 제공하고 있을 수 있습니다. 사용자는 Translator API를 사용하여 모국어로 참여할 수 있습니다. 예를 들어 사용자는 모국어로 지원 채팅에 참여할 수 있으며, 사이트는 사용자가 기기에서 나가기 전에 지원 담당자가 사용하는 언어로 번역할 수 있습니다. 이를 통해 모든 사용자에게 원활하고 빠르며 포용적인 환경을 제공할 수 있습니다.
웹에서 콘텐츠를 번역하려면 일반적으로 클라우드 서비스를 사용해야 했습니다. 먼저 소스 콘텐츠가 서버에 업로드되고 서버에서 대상 언어로 번역을 실행한 후 결과 텍스트를 다운로드하여 사용자에게 반환합니다. 클라이언트에서 번역을 실행하면 서버 왕복에 필요한 시간과 번역 서비스 호스팅 비용을 절약할 수 있습니다.
시작하기
Translator API는 Chrome 138 안정화 버전부터 사용할 수 있습니다. 먼저 기능 감지를 실행하여 브라우저가 Translator API를 지원하는지 확인합니다.
if ('Translator' in self) {
// The Translator API is supported.
}
번역의 대상 언어는 항상 알고 있지만 출발어는 항상 알 수 있는 것은 아닙니다. 이 경우 Language Detector API를 사용할 수 있습니다.
하드웨어 요구사항 검토
Language Detector API 및 Translator API는 Chrome의 데스크톱에서만 작동합니다.
Prompt API, Summarizer API, Writer API, Rewriter API는 다음 조건이 충족될 때 Chrome에서 작동합니다.
- 운영체제: Windows 10 또는 11, macOS 13 이상 (Ventura 이상), Linux Android, iOS, ChromeOS용 Chrome은 아직 Gemini Nano를 기반으로 하는 Google API에서 지원되지 않습니다.
- 저장용량: Chrome 프로필이 포함된 볼륨에 22GB 이상 있어야 합니다.
- GPU: VRAM이 4GB 이상이어야 합니다.
- 네트워크: 무제한 데이터 또는 무제한 연결
이러한 요구사항은 개발 프로세스와 개발자가 빌드한 기능을 사용하는 사용자에게 적용됩니다.
언어 쌍 지원 확인
번역은 주문형으로 다운로드되는 언어 팩으로 관리됩니다. 언어 팩은 특정 언어의 사전과 같습니다.
sourceLanguage: 텍스트의 현재 언어입니다.targetLanguage: 텍스트를 번역해야 하는 최종 언어입니다.
BCP 47 언어 쇼트코드를 문자열로 사용합니다. 예를 들어 스페인어의 경우 'es', 프랑스어의 경우 'fr'입니다.
const translatorCapabilities = await Translator.availability({
sourceLanguage: 'es',
targetLanguage: 'fr',
});
// 'available'
availability() 함수는 다음 값이 포함된 프라미스를 반환합니다.
"unavailable": 구현에서 지정된 언어의 번역 또는 언어 감지를 지원하지 않습니다."downloadable": 구현은 지정된 언어의 번역 또는 언어 감지를 지원하지만 계속하려면 다운로드가 필요합니다. 다운로드한 파일이 브라우저 모델일 수 있습니다."downloading": 구현이 지정된 언어의 번역 또는 언어 감지를 지원합니다. 브라우저가 연결된 객체를 만드는 과정에서 진행 중인 다운로드를 완료하고 있습니다."available": 구현이 지정된 언어의 번역 또는 언어 감지를 지원하며 필요한 다운로드가 이미 완료되었습니다.
downloadprogress 이벤트를 사용하여 모델 다운로드 진행률을 수신 대기합니다.
const translator = await Translator.create({
sourceLanguage: 'es',
targetLanguage: 'fr',
monitor(m) {
m.addEventListener('downloadprogress', (e) => {
console.log(`Downloaded ${e.loaded * 100}%`);
});
},
});
다운로드에 실패하면 downloadprogress 이벤트가 중지되고 ready 프로미스가 거부됩니다.
번역기 만들기 및 실행
번역기를 만들려면 비동기 create() 함수를 호출합니다. sourceLanguage용 필드 1개와 targetLanguage용 필드 1개를 포함하는 옵션 매개변수가 필요합니다.
// Create a translator that translates from English to French.
const translator = await Translator.create({
sourceLanguage: 'en',
targetLanguage: 'fr',
});
번역기가 있으면 비동기 translate()를 호출합니다.
await translator.translate('Where is the next bus stop, please?');
// "Où est le prochain arrêt de bus, s'il vous plaît ?"
순차 번역
번역은 순차적으로 처리됩니다. 번역할 텍스트를 대량으로 전송하면 이전 번역이 완료될 때까지 후속 번역이 차단됩니다.
요청에 가장 효과적으로 응답하려면 요청을 함께 묶고 스피너와 같은 로드 인터페이스를 추가하여 번역이 진행 중임을 알립니다.
데모
Language Detector API와 함께 사용되는 Translator API는 Translator 및 Language Detector API 플레이그라운드에서 확인할 수 있습니다.
표준화 작업
Google에서는 크로스브라우저 호환성을 보장하기 위해 Translator API를 표준화하기 위해 노력하고 있습니다.
Google의 API 제안서는 커뮤니티의 지원을 받아 추가 논의를 위해 W3C 웹 인큐베이터 커뮤니티 그룹으로 이동했습니다. Chrome팀은 W3C 기술 아키텍처 그룹에 의견을 요청하고 Mozilla 및 WebKit에 표준 관련 입장을 요청했습니다.
웹 인큐베이터 커뮤니티 그룹에 가입하여 표준 개발에 참여할 수 있습니다.
의견 공유
Language Detector API로 빌드하는 제품을 확인하고 싶습니다. X, YouTube, LinkedIn에서 웹사이트와 웹 애플리케이션을 공유하세요.